<template>
    <div id="list">
         <el-table
    :data="tableData"
    border
    style="width: 100%">
     <el-table-column
      prop="typeid"
      label="id"
     >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      >
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      >
       <template slot-scope="scope">
        <span>{{scope.row.price+"元"}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="desc"
      label="描述"
     >
    </el-table-column>
    <el-table-column
      prop="typename"
      label="类别"
      >
    </el-table-column>
    <el-table-column
      prop="img"
      label="图片"
     >
       <template slot-scope="scope">
        <img :src="scope.row.img" class="img"/>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
    >
      <template slot-scope="scope">
        <el-button  type="text" size="small" @click="deleItem(scope.row._id)">删除</el-button>
        <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
import {GetListAll, deleteItem} from '../http/api'
export default {
  name: 'List',
  data () {
    return {
      tableData: []
    }
  },
  created: function () {
    console.log(this.$route.query.username)
    this.getListAll()
  },
  methods: {
    handleClick (row) {
      console.log(row)
      const newRow = JSON.stringify(row)
      this.$router.push({path: '/add', query: {row: newRow, username: this.$route.query.username}})
    },
    getListAll () {
      GetListAll()
        .then(res => {
          res.data.map(item => {
            item.img = 'http://localhost:3000/' + item.img
          })
          console.log(res.data)
          this.tableData = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    deleItem (id) {
      console.log(id)
      deleteItem({_id: id})
        .then(res => {
          console.log(res)
          if (res.status === 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getListAll()
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style scoped lang="less">
#list{
 /deep/.el-table__header-wrapper{
    line-height: 30px;
}
}

.img{
  width:200px;
  height:200px;
}
</style>
